<template>
  <div class="nav-box">
    <img class="img" src="../../../../public/imgs/back2.png" alt="">
    <div class="nav">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <van-icon class-prefix="icon iconfont icon-xiazai13" color="#e4463b" name="extra" size="0.8rem" />
          <div class="text-box">收藏,赞</div>
        </van-grid-item>
        <van-grid-item>
          <van-icon class-prefix="icon iconfont icon-shoucang" color="#e4463b" name="extra" size="0.8rem" />
          <div class="text-box">我和关注</div>
        </van-grid-item>
        <van-grid-item>
          <van-icon class-prefix="icon iconfont icon-yun" color="#e4463b" name="extra" size="0.8rem" />
          <div class="text-box">云盘</div>
        </van-grid-item>
        <van-grid-item>
          <van-icon class-prefix="icon iconfont icon-duigouxiao" color="#e4463b" name="extra" size="0.8rem" />
          <div class="text-box">已购</div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script  type='module'>
export default {
  name: 'MyNav'
}
</script>
<style lang="less" scoped>
.nav-box {
  position: relative;
  width: 100%;
  top: -100px;
  .nav {
    background-color: #f5f5f5;
    margin-top: -10px;
    .van-empty__image {
      width: 30px;
      height: 30px;
    }
    .van-grid {
      margin: 0 16px;
      background-color: #fff;
      margin-bottom: -10px;
    }
    .text-box {
      line-height: 26px;
      font-size: 14px;
    }
  }
  .img {
    width: 100%;
  }
}
</style>
